@blue : #00b3e6;
@grey : #666;
@grey-light: #EEE;
@grey-dark : #444;

body {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: "Trebuchet MS";
    color: @grey;
    background: url('../img/background.png');
}

a {
    color: inherit;
    text-decoration: none;
}

.left { float: left; }
.right { float: right; }
.clearfix { clear: both; }

.wrapper, #content {
    width: 950px;
    margin: auto;
}


/*
 * Top bar
 */
#top-bar {
    background: @grey-dark;
    color: #FFF;

    div {
        a {
            display: inline-block;
            padding: 8px 16px;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;

            &:hover {
                background: @blue;
            }
        }
    }
}


/*
 * Header
 */
header {
    background: #FFF;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);

    #logo {
        float: left;
    }

    #menu {
        float: right;

        a {
            font-size: 14px;
            text-transform: lowercase;
            padding: 13px 22px 13px 22px;
            border-bottom: 2px solid @grey-light;
            color: #AAA;
            float: left;

            &:hover {
                color: @grey;
                border-bottom-color: @grey;
            }

            &.selected {
                color: @blue;
                border-bottom-color: @blue;
            }
        }
    }
}


/*
 * Content
 */
#content {
    padding-top: 20px;
}


/*
 * Footer
 */
footer {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 11px;
}